<ng-container *reqRolesIf="content">
  <!-- dialog -->
  <ng-container *ngIf="content.dialog; else link">
    <div *ngTemplateOutlet="action; context: { link: content }"></div>
  </ng-container>
  <!-- link -->
  <ng-template #link>
    <!-- absolute link -->
    <a
      contentedit="label"
      *ngIf="isAbsolute(content.href || ''); else relative"
      [ngClass]="classes"
      [matTooltip]="content.tooltip?.message || ''"
      [matTooltipPosition]="content.tooltip?.position || 'above'"
      [href]="content.href || 'javascript:void(0);'"
      [target]="content.target || '_self'"
      [innerHTML]="content.label | safeHtml"
      title="{{ content.label }}"
      rel="noopener"
      (click)="nav($event)"
    ></a>

    <!-- relative link /node/1 -->
    <ng-template #relative>
      <ng-container *ngIf="content.href; else void">
        <!-- drawer -->
        <ng-container *ngIf="content.rel && content.rel === 'drawer'; else default">
          <div *ngTemplateOutlet="action; context: { link: content }"></div>
        </ng-container>
        <!-- router link -->
        <ng-template #default>
          <a
            contentedit="label"
            [matTooltip]="content.tooltip?.message || ''"
            [matTooltipPosition]="content.tooltip?.position || 'above'"
            [routerLink]="[content.href]"
            [routerLinkActive]="['active']"
            [target]="content.target || '_self'"
            [routerLinkActiveOptions]="{ exact: true }"
            [queryParams]="content.queryParams"
            [fragment]="content.fragment"
            [ngClass]="classes"
            [innerHTML]="content.label | safeHtml"
            [title]="content.label"
            (click)="nav($event)"
          >
          </a>
        </ng-template>
      </ng-container>
      <ng-template #void>
        <div *ngTemplateOutlet="action; context: { link: content }"></div>
      </ng-template>
    </ng-template>
  </ng-template>
</ng-container>

<ng-template let-link="link" #action>
  <a
    contentedit="label"
    [matTooltip]="content.tooltip?.message || ''"
    [matTooltipPosition]="content.tooltip?.position || 'above'"
    [ngClass]="classes"
    href="javascript:void(0);"
    [target]="link.target || '_self'"
    [innerHTML]="link.label | safeHtml"
    title="{{ link.label }}"
    rel="{{ link.rel }}"
    [attr.data-href]="link.href"
    (click)="nav($event)"
  ></a>
</ng-template>
